<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
	<head>
		<title>Spring MVC & Ajax</title>
		<link href="<c:url value="/resources/css/style.css" />" rel="stylesheet">
		<script type="text/javascript"
			src="<c:url value="/resources/javascript/jquery-2.1.1.js" /> "></script>
		<script type="text/javascript"
			src="<c:url value="/resources/javascript/contact.js" /> "></script>
	</head>
	<body>
		<div id="container">
		<h2>Find Contact By Name</h2>
		<div>
			<label for="firstInput">First Name</label>
			<input type="text" name="firstname" id="firstInput"/>
		</div>
		<div>
			<label for="lastInput">Last Name</label>
			<input type="text" name="lastname" id="lastInput" />
		</div>
		<div id="theJson"></div>
		<button type="button" id="button">
		Find
		</button>
		
		<h2>Submit New Contact</h2>
		
		<form id="saveContact" method="post">
			<div>
				<label for="firstNameInput">First Name</label>
				<input type="text" name="firstname" id="firstnameInput" />
			</div>
			<div>
				<label for="lastNameInput">Last Name</label>
				<input type="text" name="lastname" id="lastnameInput" />
			</div>
			<div>
				<label for="ageInput">Age</label>
				<input type="text" name="age" id="ageInput" />
			</div>
			<div>
				<input type="submit" name="submit" value="Save Contact" />
			</div>
		</form>
		<br>
		
		<h2>Table Contact</h2>
		<table id="contactTableRespone" class="table tr">
			<thead>
				<tr>
					<th>ID</th>
					<th>First Name</th>
					<th>Last Name</th>
					<th>Age</th>
				</tr>
			</thead>
			
			<tbody>
				<c:forEach var="contact" items="${contacts}">
					<tr>
						<td>${contact.id}</td>
						<td>${contact.firstname}</td>
						<td>${contact.lastname}</td>
						<td>${contact.age}</td>
					</tr>
				</c:forEach>
			</tbody>
			
			<tfoot>
				<tr>
					<th scope="row">Spring Ajax</th>
					<td colspan="4">JQuery Ajax</td>
				</tr>
			</tfoot>
		
		</table>
		
		<a href="load">JQuery By Load Method</a>
		</div>
	
	</body>
</html>
